<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./dist/vue.js"></script>
</head>
<body>
    <!--
        混入也可以进行全局注册。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。使用恰当时，这可以用来为自定义选项注入处理逻辑。
      一、
        mixin：用于全局混入，会影响到每个组件实例，通常插件都是这样做初始化的。
          Vue.mixin({
            // 这种方式会影响到每一个组件的 beforeCreate钩子函数
            beforeCreate:  () { // 逻辑 }
          })
        
        虽然官方文档不建议我们在应用中直接使用mixin,但是如果不滥用的话也是很有帮助的，比如可以全局混入封装好的ajax,或者一些工具函数等等。

      二、mixin  和 mixins的区别：

        mixins应该是我们最常使用的扩展组件的方式了。如果多个组件中有相同的业务逻辑，就可以将这些逻辑剥离出来，通过mixins混入代码，不如上拉下拉加载数据这种逻辑等等。

        另外需要注意的是：mixins混入的钩子函数会先于组件内的钩子函数执行，并且在遇到同名选项的时候也会有选择性的进行合并。

      三、项目中用到的 mixins:
      1) 在 src > 创建mixins文件夹
      2) 比如将 辅助函数 mapState 进行混入
         原本  vuex  中 的state 的访问方式有两种 ：
            方式1：语句中：this.$store.state.num ; 模板中 {{$store.state.num}}
            方式2: 使用mapState 简化state在视图中的使用，将state数据映射到computed中。
                  computed : { ...mapState(
                    // loginState: (state) => state.user.loginState // 箭头函数默认自带返回值
                    // loginState: ({ user }) => user.loginState // 参数的解构赋值
                    // loginState: ({ user: { loginState } }) => loginState // 多层解构 的 解构赋值
                  ) }
         现在将 mapState 写入到  src > mixins > storeMixins.js 中：
            import { mapState } from 'vuex'
            export default {
              computed: {
                ...mapState({
                  userid: ({ user: { userid } }) => userid,
                  loginState: ({ user: { loginState } }) => loginState
                })
              }
            }
            然后将 访问state的方式2  mapState 改成混入的形式
            import storeMixin from '@/mixins/storeMixin'
            export default {
               mixins: [storeMixin]
            }
         这样：在别的地方也要访问 state中的 loginState这个数据时，就不用再写mapState了，直接用 mixins: [storeMixin]

    --> 
</body>
<script>
   // 为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin({
  created: function () {
    var myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})

new Vue({
  myOption: 'hello!'
})
// => "hello!"
</script>
</html>